

<template>
<div style="height: 6vh;background-color: #fff;padding: 10px 20px ">
  <span style="line-height: 60px;font-size: 20px">用户管理</span>
  <el-button type="primary" style="float: right ;margin-top: 10px" @click="dialogVisible = true">新建用户</el-button>
</div>
  <el-dialog
  title="新建用户"
    style="width: 1000px;padding: 40px;"
  v-model="dialogVisible"
  :before-close="handleClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱">
          <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="职级">
            <el-select placeholder="请选择职级" v-model="saveUserForm.level">
              <el-option label="员工" value="10"></el-option>
              <el-option label="经理" value="20"></el-option>
              <el-option label="总监" value="30"></el-option>
              <el-option label="总裁" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="直属领导" >
            <el-select placeholder="请选择直属领导" v-model="saveUserForm.parentId">
              <el-option v-for="p in leaderOptions"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别">
           <el-radio-group v-model="saveUserForm.gender">
             <el-radio border label="男" value="1" style="margin: 0"></el-radio>
             <el-radio border label="女" value="0"></el-radio>
           </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio border label="启用" value="1" style="margin: 0"></el-radio>
              <el-radio border label="禁用" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>


  </el-dialog>
</template>
<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from 'qs';

const dialogVisible = ref(false);
const leaderOptions = ref([
  {
    value: '选项2',
    label: '20'
  },
  {
    value: '选项3',
    label: '20'
  }
])
const saveUserForm = ref({
  name: '',
  age: '',
  phone: '',
  email: '',
  status: '',
  parentId: '',
  gender:'',
  level:''
})
const saveUser = () => {
  let data = qs.stringify(saveUserForm.value);
  console.log(data);
  console.log(saveUserForm.value);
  axios.post(BASE_URL+'/v1/user/save',data)
      .then(response=>{
        if (response.data.code ===2000){
          ElMessage.success('保存成功');
          dialogVisible.value = false;
          saveUserForm.value={}
        }else {
          ElMessage.error(response.data.msg);
        }

})
}
const handleClose = () => {
  if (confirm('确定关闭弹窗？')){
    dialogVisible.value = false;
    saveUserForm.value={}
  }

}
</script>
<style scoped>

</style>